<template name="skeleton">
    <view is="components/XtxSwiper">
        <view class="carousel XtxSwiper--carousel">
            <swiper :autoplay="false" :circular="true" :interval="3000" :current="0">
                <swiper-item
                    style="
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        transform: translate(0%, 0px) translateZ(0px);
                    "
                >
                    <navigator class="navigator XtxSwiper--navigator" hover-class="none">
                        <image class="image XtxSwiper--image sk-image" mode="aspectFill"></image>
                    </navigator>
                </swiper-item>
            </swiper>
            <view class="indicator XtxSwiper--indicator">
                <text class="dot XtxSwiper--dot active XtxSwiper--active"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
            </view>
        </view>
    </view>
    <view is="pages/index/components/CategoryPanel">
        <view class="category CategoryPanel--category">
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-12 sk-text"
                    >居家</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-242 sk-text"
                    >锦鲤</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-566 sk-text"
                    >服饰</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-1 sk-text"
                    >母婴</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-813 sk-text"
                    >个护</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-556 sk-text"
                    >严选</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-527 sk-text"
                    >数码</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-419 sk-text"
                    >运动</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-377 sk-text"
                    >杂项</text
                >
            </navigator>
            <navigator class="category-item CategoryPanel--category-item" hover-class="none">
                <image class="icon CategoryPanel--icon sk-image"></image>
                <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-207 sk-text"
                    >品牌</text
                >
            </navigator>
        </view>
    </view>
    <view is="pages/index/components/HotPanel">
        <view class="panel HotPanel--panel hot HotPanel--hot">
            <view class="item HotPanel--item">
                <view class="title HotPanel--title">
                    <text
                        class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-559 sk-text"
                        >特惠推荐</text
                    >
                    <text
                        class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-770 sk-text"
                        >精选全攻略</text
                    >
                </view>
                <navigator class="cards HotPanel--cards" hover-class="none">
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                </navigator>
            </view>
            <view class="item HotPanel--item">
                <view class="title HotPanel--title">
                    <text
                        class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-552 sk-text"
                        >爆款推荐</text
                    >
                    <text
                        class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-749 sk-text"
                        >最受欢迎</text
                    >
                </view>
                <navigator class="cards HotPanel--cards" hover-class="none">
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                </navigator>
            </view>
            <view class="item HotPanel--item">
                <view class="title HotPanel--title">
                    <text
                        class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-262 sk-text"
                        >一站买全</text
                    >
                    <text
                        class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-151 sk-text"
                        >精心优选</text
                    >
                </view>
                <navigator class="cards HotPanel--cards" hover-class="none">
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                </navigator>
            </view>
            <view class="item HotPanel--item">
                <view class="title HotPanel--title">
                    <text
                        class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-409 sk-text"
                        >新鲜好物</text
                    >
                    <text
                        class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-146 sk-text"
                        >生活加分项</text
                    >
                </view>
                <navigator class="cards HotPanel--cards" hover-class="none">
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                    <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
                </navigator>
            </view>
        </view>
    </view>
</template>
<style lang="scss">
/* #ifdef APP-PLUS || H5 */
// H5默认开启 scoped 样式隔离，导致组件基础样式无效
@import '@/components/styles/XtxSwiper.scss';
@import './styles/CategoryPanel.scss';
@import './styles/HotPanel.scss';
/* #endif */

.sk-transparent {
    color: transparent !important;
}

.sk-text-0-0000-822 {
    background-image: linear-gradient(
        transparent 0%,
        #eeeeee 0%,
        #eeeeee 100%,
        transparent 0%
    ) !important;
    background-size: 100% 25.7813rpx;
    position: relative !important;
}

.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
}

.sk-text-14-2857-127 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-12 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-242 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-566 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-1 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-813 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-556 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-527 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-419 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-377 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-207 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 36.0938rpx;
    position: relative !important;
}

.sk-text-14-2857-559 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 42.6563rpx;
    position: relative !important;
}

.sk-text-14-2857-770 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 32.8125rpx;
    position: relative !important;
}

.sk-text-14-2857-552 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 42.6563rpx;
    position: relative !important;
}

.sk-text-14-2857-749 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 32.8125rpx;
    position: relative !important;
}

.sk-text-14-2857-262 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 42.6563rpx;
    position: relative !important;
}

.sk-text-14-2857-151 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 32.8125rpx;
    position: relative !important;
}

.sk-text-14-2857-409 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 42.6563rpx;
    position: relative !important;
}

.sk-text-14-2857-146 {
    background-image: linear-gradient(
        transparent 14.2857%,
        #eeeeee 0%,
        #eeeeee 85.7143%,
        transparent 0%
    ) !important;
    background-size: 100% 32.8125rpx;
    position: relative !important;
}

.sk-image {
    background: #efefef !important;
}

.sk-pseudo::before,
.sk-pseudo::after {
    background: #efefef !important;
    background-image: none !important;
    color: transparent !important;
    border-color: transparent !important;
}

.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
    border-radius: 0 !important;
}

.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
    border-radius: 50% !important;
}

.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}
</style>
